import React, {
    PureComponent
} from 'react';

import {
    Text,
    View,
    Image,
    StyleSheet
} from 'react-native';

import {
    Bar,
    Press,
    Layout
} from './../../../components';

import Content from './content';

import * as Const from './../../../const';

import filter_icon from './../../../images/home/filter.png';

interface Props {
    openFilter:Function
}

class Browser extends PureComponent<Props, any> {

    private content:any = null;

    static defaultProps = {
        openFilter:() => null
    }

    private openFilter = () => {
        const {
            openFilter
        } = this.props;
        openFilter(this.onFilter)
    }

    private onFilter = () => {
        this.content.onLoadNew();
    }

    render() {
        return (
            <Layout
                scroll={false}
                padding={false}
                backShow={false}
                title="Discover"
            >
                <Content
                    openFilter={this.openFilter}
                    ref={(e:any) => this.content=e}
                />
                <Press
                    style={styles.filter}
                    onPress={this.openFilter}
                >
                    <Image source={filter_icon}/>
                    <Text style={styles.text}>
                        Filters
                    </Text>
                </Press>
            </Layout>
        )
    }
}

export default Browser;

const styles = StyleSheet.create({
    container: {
        flex: 1
    },
    filter:{
        height:36,
        width:90,
        right:0,
        bottom:12,
        position:`absolute`,
        borderTopLeftRadius:18,
        borderBottomLeftRadius:18,
        backgroundColor:`#AA00FF`,
        flexDirection:`row`,
        alignItems:`center`,
        justifyContent:`center`
    },
    text:{
        fontSize:14,
        color:`#fff`,
        marginLeft:2,
        fontFamily:Const.fontFamily
    }
}) as any;